<template>
  <view class="exam-item">
    <view class="title u-line-1">{{ datas.paper.title }}</view>
    <view class="text">作答次数：{{ datas.answer_count }}/{{ datas.exam_number || '无限制' }}</view>
    <view v-if="datas.exam_stime" class="time text">
      考试时间：{{ getFormateDate(datas.exam_stime, datas.exam_etime) }}
    </view>
    <view v-else class="time text">永久有效</view>
    <view class="btn" @click="onExam(datas, 8)">
      <u-icon name="fankui" custom-prefix="edu-icon" size="32" :color="globPrimaryColor"></u-icon>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    onExam(item, type) {
      this.$emit('click', item, type)
    },
    getFormateDate(stime, etime) {
      if (String(stime).length == 10) stime *= 1000
      if (String(etime).length == 10) etime *= 1000
      const now = new Date() // 当前

      const sdate = new Date(stime)
      const edate = new Date(etime)

      // 同一年
      const isSameYear = (timestamp1, timestamp2) => {
        return timestamp1.getFullYear() === timestamp2.getFullYear()
      }

      // 同一天
      const isSameDay = (timestamp1, timestamp2) => {
        return (
          timestamp1.getFullYear() === timestamp2.getFullYear() &&
          timestamp1.getMonth() === timestamp2.getMonth() &&
          timestamp1.getDate() === timestamp2.getDate()
        )
      }

      const cFormat = 'yyyy-mm-dd hh:MM'
      const mFormat = 'mm-dd hh:MM'
      const hFormat = 'hh:MM'

      // 今年
      if (isSameYear(now, sdate)) {
        if (isSameDay(sdate, edate)) {
          return this.$u.date(stime, mFormat) + '～' + this.$u.date(edate, hFormat)
        } else {
          return this.$u.date(stime, mFormat) + '～' + this.$u.date(edate, mFormat)
        }
      } else {
        if (isSameDay(sdate, edate)) {
          return this.$u.date(stime, cFormat) + '～' + this.$u.date(edate, hFormat)
        } else {
          return this.$u.date(stime, cFormat) + '～' + this.$u.date(edate, mFormat)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.exam-item {
  margin-top: 20rpx;
  padding: 30rpx 24rpx;
  background: #ffffff;
  border-radius: 8rpx;
  position: relative;
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: $edu-main-color;
    line-height: 40rpx;
    margin-bottom: 24rpx;
    padding-right: 65rpx;
  }
  .text {
    font-size: 24rpx;
    font-weight: 400;
    color: $edu-tips-color;
    line-height: 33rpx;
  }
  .time {
    margin-top: 12rpx;
  }
  .btn {
    position: absolute;
    top: 34rpx;
    right: 24rpx;
    z-index: 9;
  }
}
</style>
